<template>
  <div id="app">
    <a-layout>
      <a-layout-header :style="{ background: '#fc9d00' }" align="middle">
        <p id="it_title">IT知识挑战赛</p>
      </a-layout-header>
      <a-layout>
        <a-layout-sider
          width="200"
          :style="{
            background: '#fff',
            overflow: 'auto',
            height: '90vh',
          }"
        >
          <a-menu
            mode="inline"
            :open-keys="openKeys"
            :selectedKeys="selectedKeys"
            @click="handleClick"
            @openChange="onOpenChange"
          >
            <a-sub-menu v-for="pt in menu" :key="pt.type">
              <span slot="title"><a-icon type="user" />{{ pt.type }}</span>
              <a-menu-item v-for="p in pt.problems" :key="p">
                第{{ p }}题
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout-content :style="{ minHeight: '90vh' }">
          <a-list
            item-layout="vertical"
            size="large"
            bordered
            :data-source="problem_display.options"
          >
            <a-list-item slot="renderItem" slot-scope="item, index">
              <h2 :style="{ color: item.color }">
                {{ String.fromCharCode(index + 65) }} {{ item.title }}
              </h2>
            </a-list-item>
            <div slot="header">
              <a-row type="flex">
                <a-col flex="100px">
                  <a-statistic-countdown
                    title="倒计时"
                    :value="problem_display.deadline"
                    format="mm:ss:SSS"
                    style="margin-right: 50px"
                  />
                </a-col>
                <a-col flex="auto">
                  <p id="problem_text">
                    {{ problem_display.text }}
                  </p>
                </a-col>
              </a-row>
            </div>
            <div slot="footer"></div>
          </a-list>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <a-modal
      v-model="group_display_visible"
      title="Modal"
      ok-text="确认"
      cancel-text="取消"
      @ok="group_display_visible = false"
    >
      <a-list
        :grid="{
          gutter: 16,
          xs: 1,
          sm: 2,
          md: 4,
          lg: 4,
          xl: 6,
          xxl: 3,
        }"
        :data-source="group_display"
      >
        <a-list-item slot="renderItem" slot-scope="item, index" align="middle">
          <a-card
            id="group_score"
            :title="item.group"
            size="small"
            :style="{ color: item.color }"
          >
            {{ item.score }}
          </a-card>
        </a-list-item>
      </a-list>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      menu: [],
      problem_types: [],
      openKeys: [],
      selectedKeys: [],
      problem_display: {},
      group_display_visible: false,
      group_display: [],
    };
  },
  created() {
    this.initWebSocket();
  },
  destroyed() {
    this.websock.close();
  },
  methods: {
    handleClick(e) {
      console.log("click", e);
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.problem_types.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    initWebSocket() {
      const wsuri = "ws://localhost:8000/adminws";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      console.log("connected");
    },
    websocketonerror() {
      setTimeout(this.initWebSocket(), 5000);
    },
    websocketonmessage(e) {
      let res = JSON.parse(e.data);
      console.log(res);
      if (res.action == "group_display") {
        this.group_display = res.data;
      } else if (res.action == "group_display_visible") {
        this.group_display_visible = true;
      } else if (res.action == "problem_display") {
        this.problem_display = res.data;
        console.log(Date.now());
      } else if (res.action == "menu") {
        this.menu = res.data;
        let problem_types = [];
        this.menu.forEach((element) => {
          problem_types.push(element.type);
        });
        console.log(problem_types);
        this.problem_types = problem_types;
      } else if (res.action == "selectedKeys") {
        this.selectedKeys = [res.data];
        console.log(this.selectedKeys)
      }
    },
    websocketsend(Data) {
      this.websock.send(Data);
    },
    websocketclose(e) {
      console.log("disconnected" + e);
    },
  },
};
</script>

<style>
#it_title {
  font-size: 36px;
}
#problem_text {
  font-size: 28px;
}
#group_score {
  font-size: 20px;
}
</style>